html, body{background:#444343; letter-spacing:-0.02em;}


/*header*/
header.header{position:absolute; top:0; left:0; width:100%;  height:110px; border-bottom:1px solid rgba(255, 255, 255, 0.3); z-index:1000; }
.header-wrap{width:1200px; margin:0 auto; position:relative; display:flex;  justify-content:space-between} 
h1.logo{width:300px;}
h1.logo a{display:block;  font-size:0; text-indent:-999em; position:absolute; top:0; left:0; width:380px; height:110px; background:url('../images/common/logo.png') no-repeat 0 50%}

nav{padding:35px 0 0 0; }
nav ul.gnb{display:flex; justify-content:flex-end;}
nav ul.gnb > li {padding-left:70px;height:109px; }
nav ul.gnb > li > a{display:block; color:#fff; font-family: 'GmarketSansMedium'; font-size:21px;}
nav ul.gnb > li > a span{display:block; font-size:10px; font-family: 'GmarketSansLight'; line-height:15px;}
nav ul.gnb li ul.sub-gnb{display:none}

	@media(max-width:1400px){
		nav{padding-right:200px;}
	
	}

.rbn > a{position:fixed; width:110px; height:109px;font-size:0; text-indent: -9999em; }
.rbn > a > span{display:block; margin:0 auto; width:25px; padding-top:40px}
a.user{top:0; right:110px; background:#262520; }
a.menu{ top:0; right:0;  background:#ffe785; }
a.menu span.on{display:none}
.all-menu{display:none; position: fixed; top:110px; right:0; background:#fff; padding:0 50px 50px 50px; border:10px solid #ffe785; width:430px; }
.all-menu > ul > li > a{display:inline-block; position:relative; padding:50px 5px 0 5px;}
.all-menu > ul > li > a span{ font-size:1.7em; position:relative; z-index:10;}
.all-menu > ul > li:hover > a:before{content:''; display:block; background:#ffe785; height:12px; width:100%; position:absolute; bottom:0; left:0; z-index:9}
.all-menu ul li ul.sub-gnb{display:flex; flex-wrap:wrap; align-items:stretch;  padding:20px 0 0 0}
.all-menu ul li ul.sub-gnb > li{padding:10px;}
.all-menu ul li ul.sub-gnb > li a{font-size:1.1em;}
.all-menu ul li ul.sub-gnb > li a:hover{text-decoration:underline;}


/*footer*/
footer{background:#262520; padding:40px 0; text-align:center; font-size:0.95em;  }
footer p{display:inline-block;  color:#fff }
footer p span{display:inline-block; padding:0 10px; position:relative}
footer p span:before{display:block; width:1px; height:10px; background:#6c6a60; content:''; position:absolute; top:5px; left:0 }
footer p span:first-child{padding-left:0}
footer p span:first-child:before{display:none}
footer .member {padding-top:10px;}
footer .member span a{ display:inline-block; background:#ffe785; color:#000; margin-left:5px; line-height:30px; border-radius:30px; padding:0 15px;}

footer > span{display:block; text-align:center; color:#9b9b9b; padding-top:12px;}


/*main*/

#main .visual{height:980px; position:relative;  overflow:hidden;  }
#main .visual .txt{position:absolute; width:800px; top:calc(50% - 120px); left:calc(50% - 400px);  }
#main .visual .txt > *{display:block; transform:translateY(100%); opacity:0; animation:showTop 0.8s cubic-bezier(0, 0, 0.21, 0.96) 0s 1 forwards}
#main .visual .txt .tit{height:170px; font-size:0; text-indent:-9999em; background:url('../images/main/visual-txt.png') no-repeat 50% 0; animation-delay:0.3s;}
#main .visual .txt .tt{padding-top:50px;  text-align:center; font-size:1.5em; color:#fff; font-family: 'HallymMjo-Regular'; text-shadow:0 2px 2px rgb(0 0 0 / 90%); animation-delay:1.5s;}
#main .visual .img .img-item {width:100%; overflow:hidden; ; height:980px; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}
#main .visual .img .img-item.v1{background-image:url('../images/main/visual-img1.jpg')}
#main .visual .img .img-item.v2{background-image:url('../images/main/visual-img2.jpg')}
#main .visual .img .img-item.v3{background-image:url('../images/main/visual-img3.jpg')}

#main .introduce{position:absolute; top:880px; right:0; width:85%; height:210px; background:url('../images/main/intro-bg.jpg'); box-shadow:10px 10px 13px 0 rgb(0 0 0 / 20%)}
#main .introduce dl{display:flex; position:relative; }
#main .introduce dl dt{width:300px; height:210px; font-size:0; text-indent: -999em;  background:url('../images/main/intro-txt.png') no-repeat 50% 50%;}
#main .introduce dl dd{font-size:1.3em; line-height:1.7; color:#fff; font-family: 'HallymMjo-Regular'; padding-top:70px; }


#main .main-con{background:url('../images/main/con-bg.jpg') no-repeat 50% 0}

#main .quick{width:1200px; margin:0 auto; padding-top:270px; display:flex;  justify-content:space-between}
#main .quick a{display:inline-block; width:23%; padding:150px 0 20px 0; position:relative;}
#main .quick a span{display:block;text-align:center;   font-family: 'GmarketSansLight'; color:#fff; font-size:1.5em; position:relative;  z-index:10}
#main .quick a:before{display:block;  position:absolute;  z-index:10; top:0; left:50%;  transform:translateX(-50%);width:100px;; height:110px; content:''; background-repeat:no-repeat; background-image:url('../images/main/con-icon.png'); transition:all 0.5s;}
#main .quick a:nth-child(1):before{background-position:0 0;}
#main .quick a:nth-child(2):before{background-position:-100px 0;}
#main .quick a:nth-child(3):before{background-position:-200px 0;}
#main .quick a:nth-child(4):before{background-position:-300px 0;}
#main .quick a:after{display:block; content:''; position:absolute; z-index:9; top:0;  left:50%;  transform:translateX(-50%);width:80%; height:100%;  transition:all 0.5s;}
#main .quick a:hover:after{background:#ffe785; box-shadow:10px 10px 13px 0 rgb(0 0 0 / 20%); }
#main .quick a:hover:before{background-position-y:-110px; top:10px}
#main .quick a:hover span{color:#2c2c2c; font-family: 'GmarketSansMedium';}
#main .quick a i{display:block; font-style:normal; color:#fff; font-size:0.9em; text-align:center; opacity:0.7; padding-top:5px; position:relative;  z-index:10}
#main .quick a:hover i{color:#2c2c2c;}

#main .view{width:1200px; margin:0 auto; position:relative; margin-top:170px;}
#main .view h2{font-family: 'GmarketSansLight'; color:#fff; font-size:2.5em;}
#main .view h2 span{ font-family: 'GmarketSansMedium';}
#main .view .more{display:inline-block; position:absolute; top:11px; right:0; border:1px solid #fff; border-radius:50px; font-family: 'GmarketSansLight'; padding:5px 20px; color:#fff; font-size:0.9em; transition:all 0.5s;}
#main .view .more:hover{background:#fff; color:#2c2c2c; }
#main .view > ul{padding-top:50px; display:flex; justify-content:space-between}
#main .view ul.list-gall li{width:24%}
#main .view ul.list-gall li a{display:block;position:relative; }
#main .view ul.list-gall li a img{width:100%; height:220px;}
#main .view ul.list-gall li a:before{content:''; position:absolute; z-indx:2; top:0; right:0; bottom:0; left:0; border:4px solid transparent; transition:all 0.15s ease-out}
#main .view ul.list-gall li a:hover:before{border-color: #fff; border-width: 6px;  box-shadow:10px 10px 13px 0 rgb(0 0 0 / 20%);}
#main .view ul.list-not {flex-wrap:wrap; align-items:stretch; padding-bottom:100px}
#main .view ul.list-not li {width:49%; border-bottom:1px solid #fff; position:relative; padding:15px 15px 0 100px;  transition:all 0.15s ease-out}
#main .view ul.list-not li:hover{border-bottom-color:#ffe785}
#main .view ul.list-not li span{display:block; position:absolute; bottom:0; left:0; width:75px; height:75px; text-align:center; background:#fff; transition:all 0.15s ease-out}
#main .view ul.list-not li:hover span{background:#ffe785}
#main .view ul.list-not li span i{display:block; padding-top:10px; color:#2c2c2c; font-size:1.7em; font-family: 'GmarketSansBold';font-style:normal }
#main .view ul.list-not li a {display:block; line-height:75px; color:#fff; font-size:1.1em; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#main .view ul.list-not li:hover a{color:#ffe785}




@keyframes showTop{
	0%{transform:translateY(100%);  opacity:0;}
	100%{transform:translateY(0);  opacity:1;}
}




/*sub-layout*/
.sub-top{height:350px; background:url('../images/common/sub-bg1.jpg') no-repeat 50% 0; position:relative;}
.sub-top .s-gnb{position:absolute; bottom:0; left:0; width:100%; }
.sub-top .s-gnb > div{width:1200px; height:70px; margin:0 auto;  background:#fff; position:relative; right:0; display:flex;  justify-content:space-between}
.sub-top .s-gnb .smenu{display:inline-flex; }
.sub-top .s-gnb .smenu li{position:relative;}
.sub-top .s-gnb .smenu li:before{content:''; width:1px; height:14px; background:#b2b2b2; position:absolute; top:25px; left:0}
.sub-top .s-gnb .smenu li:first-child:before{display:none}
.sub-top .s-gnb .smenu li.on:after{content:''; display:block; background:#ffe785; position:absolute; top:-10px; left:-10px; width:110%; height:85px; z-index:10;  box-shadow:10px 10px 13px 0 rgb(0 0 0 / 10%)}
.sub-top .s-gnb .smenu li a{display:block; line-height:70px; padding:0 50px; font-family: 'GmarketSansMedium'; font-size:1.2em; position:relative; z-index:11;}
.sub-top .s-gnb .smenu li a:hover, .sub-top .s-gnb .smenu li a:focus{text-decoration:underline;}
.slocation{display:flex; padding-right:30px;}
.slocation li{position:relative;  line-height:70px;  padding:0 10px 0 25px;}
.slocation li:before{content:''; width:15px; height:15px; display:block; background:url('../images/common/sub-loc-arrow.jpg') no-repeat 50% 50%; position:absolute; left:0; top:25px;}
.slocation li:first-child:before{display:none; padding-left:0}
.content-wrap{background:#fff; min-height:700px; }
.content-wrap > *{width:1200px; margin:0 auto; }
.content-wrap .sub-title{text-align:center; padding:100px 0}
.content-wrap .sub-title h2{display:inline-block; position:relative; padding:0 10px;}
.content-wrap .sub-title h2 span{font-family: 'GmarketSansMedium'; font-size:2.5em; position:relative; z-index:10;}
.content-wrap .sub-title h2:before{content:''; display:block; background:#ffe785; height:20px; width:100%; position:absolute; bottom:5px; left:0; z-index:9}
.content-wrap .sub-title h2 i{display:block; padding-bottom:10px;}
.content{padding-bottom:100px;}



#hd_pop{z-index:10000;}